Vue.component("sign",{
    template:`
        <span>
            <slot name="nologin" v-if="!myinfo">
                <a @click="showEditor = true" style="cursor: pointer">登录</a>
                <a @click="showForget = true" style="cursor: pointer">忘记密码</a>
                <a href="props.regHtml">注册</a>
            </slot>
             <slot name="logined" v-else v-bind:myinfo="myinfo">
                <a href="#">欢迎:{{myinfo.name}}</a>
                 <a href="/sign/logout">退出</a>
            </slot>
        <span/>
        <el-dialog title="登录窗口" :visible.sync="showEditor" width="600px">
            <el-form :inline="true" label-position="left" style="flex:none;">
                <el-form-item label="账号:" label-width="80px">
                    <el-input v-model="username" placeholder="请输入账号" style="width: 420px"></el-input>
                </el-form-item>
                <br>
                <el-form-item label="密码:" label-width="80px">
                    <el-input v-model="password" placeholder="请输入密码" type="password" style="width: 420px"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showEditor = false;username='';password=''">取 消</el-button>
                <el-button type="primary" @click="login()">确 定</el-button>
            </div>
        </el-dialog>
        
        <el-dialog title="忘记密码" :visible.sync="showForget" width="600px">
            <el-steps :active="forgetStep" align-center>
              <el-step title="发送验证码"></el-step>
              <el-step title="重置密码"></el-step>
              <el-step title="返回结果"></el-step>
            </el-steps>
            <el-form v-if="forgetStep==0" label-position="left" style="flex:none; width: 50%; margin: auto">
                <el-form-item label="账号:" label-width="80px">
                    <el-input v-model="username" placeholder="请输入账号"></el-input>
                </el-form-item>
                <br>
                <el-form-item label="" label-width="80px">
                     <div style="text-align: right">
                        <el-button @click="sendForgetMail">发送验证码</el-button>
                     </div>
                </el-form-item>
            </el-form>
            <el-form v-else-if="forgetStep==1" label-position="left" style="flex:none; width: 50%; margin: auto">
                <el-form-item label="新密码:" label-width="80px">
                    <el-input v-model="username" placeholder="请输入新密码"></el-input>
                </el-form-item>
                <el-form-item label="确认密码:" label-width="80px">
                    <el-input v-model="username" placeholder="请输入确认密码"></el-input>
                </el-form-item>
                <br>
                <el-form-item label="" label-width="80px">
                    <div style="text-align: right">
                        <el-button @click="forgetStep++">重置密码</el-button>
                    </div>
                </el-form-item>
            </el-form>
            <div v-else style="width: 50%; margin: auto">
                  <p>显示结果</p>
                   <div style="text-align: right">
                   <el-button @click="forgetStep = 0">重置密码</el-button>
                    </div>
            </div>

            <div slot="footer" class="dialog-footer">
                <el-button @click="showForget = false">放 弃</el-button>
            </div>
        </el-dialog>
    `,
    data(){
        return{
            username:"",
            password:"",
            showEditor:false,
            props:{},
            myinfo:{},
            showForget:false,
            forgetStep:0
        };
    },
    methods:{
        login(){
            let p = new URLSearchParams();
            p.append("username",this.username);
            p.append("password",this.password);
            axios.post(
                "sign/login",
                p
            ).then(res=>{
                if(res.data.code == 1){
                    this.$message(res.data.msg);
                    this.username="";
                    this.password="";
                    this.getMyinfo();
                    this.showEditor =false;
                }else{
                    this.$alert(res.data.msg);
                }
            });
        },
        getMyinfo(){
            axios.get("sign/myinfo").then(res=> {
                this.myinfo = res.data.data;
                // 注册自定义事件
                this.$emit("login",this.myinfo);
            });
        },
        sendForgetMail(){
            axios.get("sign/getforgetEmail?username="+ this.username).then(res=>{
                if(res.data.code == 1){
                    axios.get("vcode/email?title=忘记密码验证邮件&email=" + res.data.data).then(res=>{
                        this.$alert(res.data.msg);
                        if(res.data.code == 1){
                            this.forgetStep++;
                        }
                    })
                } else {
                    this.$alert(res.data.msg);
                }
            })
        }
    },
    created(){
        axios.get("sign/props").then(res=>this.props = res.data);
        this.getMyinfo();
    }
})